<template>
  <section class="real-app">
    <div class="tab-container">
      <tabs :value="filter" @change="handleChangeTab">
        <tab v-for="tab in stats" :key="tab" :label="tab" :index="tab">
        </tab>
      </tabs>
    </div>

    <input
      type="text"
      class="add-input"
      autofocus="autofocus"
      placeholder="接下去要做什么？"
      @keyup.enter="handleAdd"
    >

    <!-- 组件：列表数据 -->
    <!-- @del监听子组件传递过来请求 -->
    <item
      v-for="todo in filteredTodos"
      :key="todo.id"
      :todo="todo"
      @del="deleteTodo"
      @toggle="toggleTodoState"
    ></item>

    <!-- 组件：按钮 -->
    <!-- @toggle子组件传递过来的 -->
    <helper
      :filter="filter"
      :todos="todos"
      @clearAllCompleted="clearAllCompleted"
    ></helper>

    <!--<router-view></router-view>-->
  </section>
</template>
<script>
  import {
    mapState, mapActions
  } from 'vuex'
  // 组件：列表数据
  import Item from './item.vue'
  // 组件：按钮
  import Helper from './helper.vue'

  // let id = 0
  export default {
    metaInfo: {
      title: 'the todo app'
    },
    props: ['id'],
    mounted () {
      // setTimeout(() => {
      //  this.tabValue = '2'
      // }, 1000)
      this.fetchTodos()
    },
    data () {
      return {
        // 列表数据
        // todos: [],
        // 过滤条件（all指所有）
        filter: 'all',
        // tabValue: 'all',
        // inputContent: '',
        stats: ['all', 'active', 'completed']
      }
    },
    components: {
      Item,
      Helper
    },
    computed: {
      ...mapState(['todos']),
      /**
       * 过滤的todo
       */
      filteredTodos () {
        if (this.filter === 'all') {
          return this.todos
        }
        // true false
        const completed = this.filter === 'completed'
        return this.todos.filter(todo => completed === todo.completed)
      }
    },
    methods: {
      ...mapActions([
        'fetchTodos',
        'addTodo',
        'deleteTodo',
        'updateTodo',
        'deleteAllCompleted'
      ]),
      /**
       * 添加数据
       * @param e
       */
      // addTodo (e) {
      // unshift创建一个数组，并把一个元素添加到数组的开头
      //  this.todos.unshift({
      //    id: id++,
      //    content: e.target.value.trim(),
      //    completed: false
      //  })
      // 清空
      //  e.target.value = ''
      // },
      handleAdd (e) {
        const content = e.target.value.trim()
        if (!content) {
          this.$notify({
            content: '必须输入要做的内容'
          })
          return
        }
        const todo = {
          content,
          // 默认：状态未完成
          completed: false
        }
        this.addTodo(todo)
        e.target.value = ''
      },
      /**
       * 子组件促发删除的事件
       * @param id 要删除的id
       */
      // deleteTodo (id) {
      //  this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1)
      // },
      /**
       * 子组件促发修改按钮的事件
       * @param state
       */
      // toggleFilter (state) {
      //  this.filter = state
      // },
      toggleTodoState (todo) {
        this.updateTodo({
          id: todo.id,
          // 把todo的completed取反，放到{}
          todo: Object.assign({}, todo, {
            completed: !todo.completed
          })
        })
      },
      /**
       * 子组件促发清空按钮的事件
       */
      clearAllCompleted () {
        // this.todos = this.todos.filter(todo => !todo.completed)
        this.deleteAllCompleted()
      },
      /**
       * 子组件促发tab切换状态
       * @param value
       */
      handleChangeTab (value) {
        this.filter = value
      }
    }
  }
</script>
<style lang="stylus" scoped type="text/stylus">
  .real-app {
    width 600px
    margin 0 auto
    box-shadow 0 0 5px #666
  }

  .add-input {
    position: relative;
    margin: 0;
    width: 100%;
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
    border: 0;
    outline: none;
    color: inherit;
    box-sizing: border-box;
    font-smoothing: antialiased;
    padding: 16px 16px 16px 36px;
    border: none;
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
  }
  .tab-container
    background-color #fff
    padding 0 15px
</style>
